<!DOCTYPE html>
<html lang="en">
<head>

    <!-- 该例子在最新版chrome无效果,但safari可以展示 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            margin:50px;
            padding: 10px;
            border: 1px solid red;
            width: 200px;
            height: 200px;
            position: relative;

            /* 设定透视的距离 */
            perspective: 500px;

            /* 3d变换 */
            /* transform-style: preserve-3d; */


            /* transform: translateZ(-100px); */
            /* transition:transform .4s; */
        }
        .container{
            /* transform: translateZ(-100px) rotateX(90deg) rotateY(90deg); */
        }
        #cube{
            /* width:200px;
            height:200px; */
        }
        #cube div{
            width: 200px;
            height:200px;
            position: absolute;
            line-height: 200px;
            font-size:50px;
            text-align: center;
        }
        #cube:hover{
            /* transform: translateZ(-100px) rotateX(270deg); */
            /* transform: translateZ(-100px) rotateX(90deg) rotateY(90deg); */
        }
        .front{
            transform: translateZ(100px);
            /* transform: translateX(100px); */
            /* transform: translateX(100px) translateY(10px) rotate(25deg); */
            /* transform: rotate(25deg) translateX(100px) translateY(10px); */
            background:rgba(255,0,0,.3);
        }
        .back{
            /* transform: translateZ(-100px); */
            transform: translateZ(-100px) rotateY(180deg);
            background:rgba(0,255,0,.3);
        }
        .left{
            transform: translateX(-100px) rotateY(-90deg);
            background:rgba(0,0,255,.3);
        }
        .right{
            transform: translateX(100px) rotateY(90deg);
            background:rgba(255,255,0,.3);
        }
        .top{
            transform: translateY(-100px) rotateX(-90deg);
            background:rgba(255,0,255,.3);
        }
        .bottom{
            transform: translateY(100px) rotateX(90deg);
            background:rgba(0,255,255,.3);
        }

        
    </style>
</head>
<body>
    <div class="container">
        <div id="cube">
            <div class="front">1</div>
            <div class="back">2</div>
            <div class="right">3</div>
            <div class="left">4</div>
            <div class="top">5</div>
            <div class="bottom">6</div>
        </div>
    </div>
</body>
</html>
